<template>
	<view 
        v-if="visible"
        class="zz-notice-pop20200729"
        catchtouchmove="ture">
        <!--  -->
        <view 
            class="mask" 
            :class="[
                {'show':showMask},
                {'hide':!showMask}
            ]"
            @click.stop="closeNotice"></view>
        <!--  -->
        <view 
            :style="[{
                'width':`${width}rpx`,
                'min-height':`${height}rpx`
            }]"
            class="content"
            :class="[
                {'nopd':nopd||hasBg},
                {'nobr nobg':hasBg},
                {'show':showContent},
                {'hide':!showContent}
            ]">
            <!-- 背景图1 -->
            <view
                v-if="hasBg&&couponBgFirst"
                class="content_bg">
                <image
                    :src="`${baseCommonFileUri}image/coupon_info_complete_bg.png`" 
                    class="image"></image>    
            </view>
            <!-- 背景图2 -->
            <view
                v-if="hasBg&&couponBgSecond"
                class="content_bg">
                <image
                    :src="`${baseCommonFileUri}image/coupon_info_bg.png`" 
                    class="image"></image>    
            </view>
            <!-- close -->
            <!-- <view 
                v-if="showCloseIcon" 
                class="close" 
                @click.stop="closeNotice">
                <text 
                    :style="themeStyles.textMainColor"
                    class="template__icon template_icon-colse"></text>
            </view> -->
            <!-- header -->
            <view class="header">
                <slot name="header">
                    <view class="header">{{title}}</view>
                </slot>
            </view>
            <!-- body -->
            <view class="body">
                <slot name="body"></slot>
            </view>
            <!-- footer -->
            <view class="zz-notice_footer">
                <slot name="footer"></slot>
            </view>
        </view>
        <!-- close -->
        <view 
            v-if="showCloseIcon" 
            class="close"  
            :class="[
                {'show':showMask},
                {'hide':!showMask}
            ]"
            @click.stop="closeNotice">
            <image class="zz-img-fit" :src="`${baseCommonFileUri}image/activity/cancel.png`"></image>
        </view>
    </view>
</template>

<script>
export default {
	props:{
        /* 显示隐藏弹层 */
        visible:{
            type:Boolean,
            default:false
        },
        /* 标题 */
        title:{
            type:String,
            default:""
        },
        /* 关闭弹层的图标 */
        showCloseIcon:{
            type:Boolean,
            default:false
        },
        /* 内容区内边距 */
        nopd:{
            type:Boolean,
            default:false
        },
        /* 内容区宽度 */
        width:{
            type:String,
            default:"590"
        },
        /* 内容区高度 */
        height:{
            type:String,
            default:"588"
        },
        /* 内容区是否有背景图 */
        hasBg:{
            type:Boolean,
            default:false
        },
        /* 优惠券---背景1 */
        couponBgFirst:{
            type:Boolean,
            default:false
        },
        /* 优惠券---背景2 */
        couponBgSecond:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            showMask:false,  //弹窗遮罩层
            showContent:false  //显示弹窗内容
        };
    },
    watch:{
        visible(val){
            //console.log(val);
            this.showMask = val?true:false;
            this.showContent = val?true:false;
        } 
    },
    methods:{
        closeNotice(){
            //console.log("$emit('close')");
            this.showMaks = false;
            this.showContent = false;
            let timer = null;
            clearTimeout(timer);
            timer = setTimeout(()=>{
                this.$emit("close");
            },200);
        }
    }
};
</script>

<style lang="scss">
.zz-notice-pop20200729 {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-height:100vh;
    display:flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    z-index:9999;
    overflow-y:scroll;
    /*  */
    .mask {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,.4);
        opacity:0;
        &.show {
            animation:fadeIn .2s ease-in both;
        }
        &.hide {
            animation:fadeOut .2s ease-in both;
        }
    }
    /*  */
    .content {
        position:relative;
        width:590rpx;
        min-height:588rpx;
        padding:68rpx 60rpx 42rpx;
        background-color:#fff;
        border-radius:16px;
        overflow:hidden;
        word-break: break-all;
        word-wrap:break-word;
        &.nopd {
            padding:0rpx;
        }
        &.nobr {
            border-radius:0rpx;
        }
        &.nobg {
           background-color:transparent; 
        }
        &.show {
            animation:fadeIn .2s ease-in both;
        }
        &.hide {
            animation:fadeOut .2s ease-in both;
        }
        
    }
    .content_bg {
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        &>.image {
            width:100%;
            height:100%;
            object-fit: cover;
            object-position: center;
        }
    }
    /*  */
    .header {
        position:relative;
        line-height:58rpx;
        font-size:42rpx;
        color:#333;
        /* font-weight:800; */
        font-weight:bold;
        text-align:center;
    }
    .header,
    .body,
    .zz-notice_footer {
        position:relative;
    }
    /* colse */
    .close {
        width:72rpx;
        height:72rpx;
        margin-top:20rpx;
        z-index:2;
        &.show {
            animation:fadeIn .2s ease-in both;
        }
        &.hide {
            animation:fadeOut .2s ease-in both;
        }
    }
    .template__icon {
        font-size:38rpx;
    }
    /* animation begin */
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }
    @keyframes fadeIn {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }
    /* animation end */
}
</style>
